<div class="row">
    <div class="card">
        <div class="card-header">Button Component</div>
        <div class="card-block">
            <div [(ngModel)]="selectedVal" ngbRadioGroup name="radioBasic">
                <label class="btn btn-primary">
    <input type="radio" checked="checked" value="Left"> Left
  </label>
                <label class="btn btn-primary">
    <input type="radio" disabled="disabled" value="middle"> Middle
  </label>
                <label class="btn btn-primary">
    <input type="radio" value="right"> Right
  </label>
            </div>
            <hr>
            <p>选中的值：{{selectedVal}}</p>
        </div>
    </div>
</div>


<h6></h6>
<div class="row">
    <div class="card">
        <div class="card-header">按钮形式模拟多选框</div>
        <div class="card-block">

            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary" [class.active]="model.left">
    <input type="checkbox" [(ngModel)]="model.left"> Left
  </label>
                <label class="btn btn-primary" [class.active]="model.middle">
    <input type="checkbox" [(ngModel)]="model.middle"> Middle
  </label>
                <label class="btn btn-primary" [class.active]="model.right">
    <input type="checkbox" [(ngModel)]="model.right"> Right
  </label>
            </div>
            <hr>
            <pre>{{model | json}}</pre>
        </div>
    </div>
</div>




<div class="row">
    <div class="card">
        <div class="card-header">Collapse 展开收缩Component
            <div class="card-block">
                <p>
                    <button type="button" class="btn btn-sm btn-primary" (click)="isCollapsed = !isCollapsed">Toggle</button>
                </p>
                <div [ngbCollapse]="isCollapsed">
                    <div class="card">
                        <div class="card-block">
                            内容区域点击toggle将切换显示状态
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>